<template>
  <div>
    <div class="user-info">
      <van-image round height="60" width="60" :src="$store.getters.getAvatar"/>
      <div class="user-personality">
        <span class="user-name">{{ $store.getters.getNickName }}</span>
        <span>{{ $store.getters.getSign }} <van-icon name="edit" size="10"/> </span>

      </div>
      <van-icon class="user-setting" name="setting-o" size="20" color="#000000" @click="openSetting"/>

    </div>
    <div class="user-info-btn">
      <div class="row-btn" @click="openCollect">
        <van-icon name="star-o" size="18"/>
        <span>收藏</span>
      </div>
      <div class="row-btn" @click="openReserve">
        <van-icon name="sign" size="18"/>
        <span>预定</span>
      </div>
      <div class="row-btn" @click="openTrace">
        <van-icon name="clock-o" size="18"/>
        <span>足迹</span>
      </div>
      <div class="row-btn" @click="openCoupon">
        <van-icon name="coupon-o" size="18"/>
        <span>卡券</span>
      </div>
    </div>
    <div class="user-info-card">
      <div class="all-order">
        <span>我的订单</span>
        <span class="right-detail" @click="openOrder(1)">全部 <van-icon name="arrow" size="12"/></span>
      </div>

      <div class="user-info-btn">
        <div class="row-btn" @click="openOrder(1)">
          <van-icon name="pending-payment" size="18"/>
          <span>待付款</span>
        </div>
        <div class="row-btn" @click="openOrder(2)">
          <van-icon name="send-gift-o" size="18"/>
          <span>待发货</span>
        </div>
        <div class="row-btn" @click="openOrder(3)">
          <van-icon name="clock-o" size="18"/>
          <span>待收货</span>
        </div>
        <div class="row-btn" @click="openOrder(4)">
          <van-icon name="chat-o" size="18"/>
          <span>待评价</span>
        </div>
<!--        <div class="row-btn">-->
<!--          <van-icon name="refund-o" size="18"/>-->
<!--          <span>退款/售后</span>-->
<!--        </div>-->
      </div>
    </div>

    <div class="user-info-card" @click="allExtension">

      <div class="all-order" >
        <span>推广中心</span>
        <van-icon name="arrow" size="12"/>
      </div>
      <van-divider/>
      <div class="profit-wrap">
        <div class="profit-wrap-left">
          <div class="all-profit">
            <span>0</span>
            <span class="profit-title">全部收益(元)</span>
          </div>
          <div style="background: #c5c5c5;width: 1px;height: 100%; margin: 0px 20px"></div>
          <div class="all-profit">
            <span>0</span>
            <span class="profit-title">已提现(元)</span>
          </div>
        </div>
        <van-button class="submit-button van-submit-bar__button " round type="info">邀请赚钱
        </van-button>
      </div>

    </div>
    <van-divider
      :style="{ color: '#3f3f3f', borderColor: '#3f3f3f', padding: '0 120px' }">
      可能喜欢
    </van-divider>

    <product-list/>
  </div>
</template>

<script>
import productList from '../../components/productList'

export default {
  name: 'index',
  components: {productList},
  data () {
    return {
      finished: true,
      avatar: 'https://pic.vslai.com.cn/upload/5657/2021/05/28/17/1622194045226.jpg'

    }
  },
  methods: {
    allExtension () {
      this.$router.push({name: 'extension'})
    },
    openSetting () {
      this.$router.push({name: 'setting'})
    },
    openReserve () {
      this.$router.push({name: 'reserves'})
    },
    openTrace () {
      this.$router.push({name: 'traces'})
    },
    openCoupon () {
      this.$router.push({name: 'coupons'})
    },
    openCollect () {
      this.$router.push({name: 'collect'})
    },
    openOrder (type) {
      this.$router.push({name: 'orderList', params: {type: type}})
    }
  }
}
</script>

<style scoped>

.user-info {
  padding: 10px;
  display: flex;
  flex-direction: row;
}

.user-personality {
  flex: 1;
  display: flex;
  font-size: 10px;
  flex-direction: column;
  justify-content: center;
  margin-left: 5px;
}

.user-name {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}

.social-contact {
  margin-top: 5px;
}

.contact-line {
  margin-left: 10px;
  margin-right: 10px;
  height: 10px;
  display: inline-block;
  background: black;
  width: 1px;
}

.user-setting {
  float: right;
}

.user-info-btn {
  font-size: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.row-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.row-btn span {
  margin-top: 3px;
}

.user-info-card {
  margin: 10px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
}

.all-order {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #c5c5c5;
}

.all-profit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.profit-title {
  font-size: 10px;
  color: #c5c5c5;
}

.profit-wrap {
  justify-content: space-between;
  display: flex;
  flex-direction: row;

}

.profit-wrap-left {
  flex: 1;
  justify-content: space-around;
  display: flex;
  flex-direction: row;
}

.like-list {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>
